<!DOCTYPE html>
<html lang="en">
<title>人事管理系统 ——员工管理</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3" />
<meta http-equiv="description" content="This is my page" />
<link href="/hrm/css/css.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="/hrm/js/ligerUI/skins/Aqua/css/ligerui-dialog.css"/>
<link href="/hrm/js/ligerUI/skins/ligerui-icons.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/hrm/js/jquery-1.11.0.js"></script>
<script type="text/javascript" src="/hrm/js/jquery-migrate-1.2.1.js"></script>
<script src="/hrm/js/ligerUI/js/core/base.js" type="text/javascript"></script>
<script src="/hrm/js/ligerUI/js/plugins/ligerDrag.js" type="text/javascript"></script>
<script src="/hrm/js/ligerUI/js/plugins/ligerDialog.js" type="text/javascript"></script>
<script src="/hrm/js/ligerUI/js/plugins/ligerResizable.js" type="text/javascript"></script>
<link href="/hrm/css/pager.css" type="text/css" rel="stylesheet" />
<script src="/hrm/js/dayjs.min.js" type="text/javascript"></script>
<link href="/hrm/css/kkpager_blue.css" type="text/css" rel="stylesheet" />
<script src="/hrm/js/kkpager.min.js" type="text/javascript"></script>
<script type="text/javascript">
  function gotoUpdate(id){
    window.location = "/hrm/employee/updateEmployee?flag=1&id="+id;
  };
  /** 给全选按钮绑定点击事件  */
  function checkAll(e){
    var boxs  = $("input[type='checkbox'][id^='box_']");
    // this是checkAll  this.checked是true
    // 所有数据行的选中状态与全选的状态一致
    boxs.attr("checked",e.checked);
  }
  $(function(){


    getEmployeeList("","","","","","",1);
    getJobs();
    getDepts();
    function getJobs(){
      $.ajax({
        url:"/hrm/job/getJobListAll",
        type:"POST",
        dataType:"JSON",
        success:function(res){
          if(res){
            let html = '<option value="">--请选择职位--</option>';
            for (let i = 0; i < res.length; i++) {
              let job = res[i];
              html+=' <option value="'+job.id+'">'+job.name+'</option>';
            }
            $("#job_id").html(html);
          }
        }
      })
    }
    function getDepts(){
      $.ajax({
        url:"/hrm/dept/getDeptListAll",
        type:"POST",
        dataType:"JSON",
        success:function(res){
          if(res){
            let html = '<option value="">--请选择职位--</option>';
            for (let i = 0; i < res.length; i++) {
              let dept = res[i];
              html+=' <option value="'+dept.id+'">'+dept.name+'</option>';
            }
            $("#dept_id").html(html);
          }
        }
      })
    }
    function getEmployeeList(job_id,name,cardId,sex,phone,dept_id,pageIndex){
      $.ajax({
        url:"/hrm/employee/getEmployeeList",
        data:{"pageIndex":pageIndex,"job_id":job_id,"name":name,"cardId":cardId,"sex":sex,"phone":phone,"dept_id":dept_id},
        type:"POST",
        dataType:"JSON",
        success:function(res){
          if(res && res.employees){
            $("#employeeTable").empty();
            let initHtml = '<tr class="main_trbg_tit" align="center"><td><input type="checkbox" name="checkAll" id="checkAll" onclick="checkAll(this)"></td>';
            initHtml+='<td>姓名</td>';
            initHtml+=' <td>性别</td>';
            initHtml+='<td>手机号码</td>';
            initHtml+='<td>邮箱</td>';
            initHtml+='<td>职位</td>';
            initHtml+='<td>学历</td>';
            initHtml+='<td>身份证号码</td>';
            initHtml+='<td>部门</td>';
            initHtml+='<td>联系地址</td>';
            initHtml+='<td>建档日期</td>';
            if(parent.user.status == 1){
              initHtml+=' <td align="center">操作</td>';
            }
            initHtml+=' </tr>';
            $("#employeeTable").append(initHtml);
            for (let i = 0; i < res.employees.length; i++) {
              let employee = res.employees[i];
              let html = getTrHtml(employee,i);
              $("#employeeTable").append(html);
            }
            /** 给数据行绑定鼠标覆盖以及鼠标移开事件  */
            $("tr[id^='data_']").hover(function(){
              $(this).css("backgroundColor","#eeccff");
            },function(){
              $(this).css("backgroundColor","#ffffff");
            })
          }
          if(res && res.pageModel){
            kkpager.generPageHtml({
              pno : pageIndex,
              //总页码
              total : res.pageModel.totalSize,
              //总数据条数
              totalRecords : res.pageModel.recordCount,
              getLink : function(n){
                console.log(n);
              },
              mode : 'click',//默认值是link，可选link或者click,
              click : function(n){
                this.selectPage(n);
                getEmployeeList(job_id,name,cardId,sex,phone,dept_id,n);
                return false;
              }
            });
          }
        }
      });
    };

    function getTrHtml(employee,index){
      if(employee){
        console.log(employee);
        let html = '<tr id="data_'+index+'" align="center" class="main_trbg">';
        html+=' <td><input type="checkbox" id="box_'+index+'" value="'+employee.id+'"></td>';
        html+=' <td>'+employee.name+'</td>';
        if(employee.sex == 1){
          html+='<td>男</td>';
        }else {
          html+='<td>女</td>';
        }
        html+=' <td>'+employee.phone+'</td>';
        html+=' <td>'+employee.email+'</td>';
        html+=' <td>'+employee.job.name+'</td>';
        html+=' <td>'+employee.education+'</td>';
        html+=' <td>'+employee.cardId+'</td>';
        html+=' <td>'+employee.dept.name+'</td>';
        html+=' <td>'+employee.address+'</td>';
        let date = dayjs(employee.createDate).format('YYYY-MM-DD') // '25/01/2019'
        html+=' <td>'+date+'</td>';
        if(parent.user.status == 1){
          html+='<td align="center" width="40px;" style="cursor: pointer" onclick="gotoUpdate('+employee.id+')"><img title="修改" src="/hrm/images/update.gif"/></td>';
        }

        return html;
      }
    }


    /** 删除员工绑定点击事件 */
    $("#delete").click(function(){
      var boxs  = $("input[type='checkbox'][id^='box_']");
      /** 获取到用户选中的复选框  */
      var checkedBoxs = boxs.filter(":checked");
      if(checkedBoxs.length < 1){
        $.ligerDialog.error("请选择一个需要删除的员工！");
      }else{
        /** 得到用户选中的所有的需要删除的ids */
        var ids = checkedBoxs.map(function(){
          return this.value;
        })

        $.ligerDialog.confirm("确认要删除吗?","删除员工",function(r){
          if(r){
            // alert("删除："+ids.get());
            // 发送请求
            window.location = "/hrm/employee/removeEmployee?ids=" + ids.get();
          }
        });
      }
    })
    $("#search").click(function(){
      let job_id = $("#job_id").val();
      let name = $("#name").val();
      let cardId = $("#cardId").val();
      let sex = $("#sex").val();
      let phone = $("#phone").val();
      let dept_id = $("#dept_id").val();
      getEmployeeList(job_id,name,cardId,sex,phone,dept_id,1);
    });
  })
</script>
</head>
<body>
<!-- 导航 -->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr><td height="10"></td></tr>
  <tr>
    <td width="15" height="32"><img src="/hrm/images/main_locleft.gif" width="15" height="32"></td>
    <td class="main_locbg font2"><img src="/hrm/images/pointer.gif">&nbsp;&nbsp;&nbsp;当前位置：员工管理 &gt; 员工查询</td>
    <td width="15" height="32"><img src="/hrm/images/main_locright.gif" width="15" height="32"></td>
  </tr>
</table>

<table width="100%" height="90%" border="0" cellpadding="5" cellspacing="0" class="main_tabbor">
  <!-- 查询区  -->
  <tr valign="top">
    <td height="30">
      <table width="100%" border="0" cellpadding="0" cellspacing="10" class="main_tab">
        <tr>
          <td class="fftd">
              <table width="100%" border="0" cellpadding="0" cellspacing="0">
                <tr>
                  <td class="font3">
                    职位：
                    <select name="job_id" style="width:143px;" id="job_id">
                      <option value="0">--请选择职位--</option>
                      <c:forEach items="${requestScope.jobs }" var="job">
                        <option value="${job.id }">${job.name }</option>
                      </c:forEach>
                    </select>
                    姓名：<input type="text" name="name" id="name">
                    身份证号码：<input type="text" name="cardId" maxlength="18" id="cardId">
                  </td>
                </tr>
                <tr>
                  <td class="font3">
                    性别：
                    <select name="sex" style="width:143px;" id="sex">
                      <option value="0">--请选择性别--</option>
                      <option value="1">男</option>
                      <option value="2">女</option>
                    </select>
                    手机：<input type="text" name="phone" id="phone">
                    所属部门：<select  name="dept_id" style="width:100px;" id="dept_id">
                    <option value="0">--部门选择--</option>
                    <c:forEach items="${requestScope.depts }" var="dept">
                      <option value="${dept.id }">${dept.name }</option>
                    </c:forEach>
                  </select>&nbsp;
                    <input type="submit" value="搜索" id="search"/>
                    <input id="delete" type="button" value="删除"/>
                  </td>
                </tr>
              </table>

          </td>
        </tr>
      </table>
    </td>
  </tr>

  <!-- 数据展示区 -->
  <tr valign="top">
    <td height="20">
      <table width="100%" border="1" cellpadding="5" cellspacing="0" style="border:#c2c6cc 1px solid; border-collapse:collapse;" id="employeeTable">

      </table>
    </td>
  </tr>
  <!-- 分页标签 -->
  <tr valign="top"><td align="center" class="font3">

  </td></tr>
</table>
<div style="height:10px;"></div>
</body>
</html>